<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商品详情</title>
    <link rel="stylesheet" href="../../lib/css/reset.min.css">
    <link rel="stylesheet" href="../../lib/css/swiper.min.css">
    <link rel="stylesheet" href="../../css/all.min.css">
    <script src="../../lib/js/flexible.js"></script>
    <script src="../../lib/js/fastclick.js"></script>
</head>

<body ontouchstart>
    <div class="app-wrap bg-gary" id="productInfo" v-cloak>
        <!-- 头部 -->
        <div class="product-topNav bg-white">
            <i class="icon-back-product ml-48"></i>
            <div class="title-items">
                <span class="item"><a :href=`../../html/product/product.html?productId=${productId}`>商品</a></span>
                <span class="item cur"><a href="javascript:;">详情</a></span>
                <span class="item"><a :href=`../../html/product/product_comment.html?productId=${productId}`>评价</a></span>
            </div>
            <div class="icon-wrap mr-48">
                <i class="icon-cart-product mr-48"></i>
                <div class="msg">
                    <i class="icon-msg-product"></i>
                    <b>6</b>
                </div>
            </div>
        </div>

        <!-- 二级导航 -->
        <div class="product-topNav-guide bg-white">
            <div class="item" v-for="(item,index) in navGuide" :key="index" @click="tab(index)" :class="{cur: index==cur}">
                <span>{{item.name}}</span>
            </div>
        </div>
        <!-- 商品详细信息 -->
        <div class="product-infoBox-wrap bg-white">
            <div class="tab-item" v-show="cur==0">
                <div class="tit">
                    <span class="tit-line">-</span>
                    <h1 class="name">商品信息</h1>
                    <span class="tit-line">-</span>
                </div>
                <!-- 后台插入的商品图片 -->
                <div class="bd p-30" v-html="productImgs"></div>
            </div>
            <div class="tab-item" v-show="cur==1">
                <ul class="paramTable m-30">
                    <li v-for="(item,index) in productParams" :key="index"><span class="key">{{item.specName}}</span><span class="val">{{item.valueName}}</span></li>
                </ul>
            </div>
            <div class="tab-item" v-show="cur==2">
                <!-- 包装清单 -->
                <div class="list-tit">
                    <div class="tit">
                        <span class="tit-line">-</span>
                        <h1 class="name">包装售后</h1>
                        <span class="tit-line">-</span>
                    </div>
                    <div class="biref p-48">
                        <p v-if="productService">{{productService.list}}</p>
                    </div>
                </div>
                <!-- 分割块 -->
                <b class="hr bg-gary"></b>
                <!-- 价格说明 -->
                <div class="explain">
                    <div class="tit">
                        <span class="tit-line">-</span>
                        <h1 class="name">价格说明</h1>
                        <span class="tit-line">-</span>
                    </div>

                    <div class="biref p-48">
                        <p v-if="productService">{{productService.explain}}</p>
                    </div>
                </div>

            </div>
        </div>
        <div class="hover-cart"> </div>
        <!-- 底部fixed buttons -->
        <div class="fixed-btns bg-white">
            <div class="item-left">
                <div class="item"><em class="icon-ft-fixed-connect"></em><span>客服</span></div>
                <div class="item"><em class="icon-ft-fixed-shop"></em><span>店铺</span></div>
                <div class="item"><em class="icon-ft-fixed-favor"></em><span>收藏</span></div>
            </div>
            <div class="item-right">
                <div class="item bg-orange"><span>加入购物车</span></div>
                <div class="item bg-red"><span>立即购买</span></div>
            </div>
        </div>
    </div>
    <script src="../../lib/js/vue.js"></script>
    <script src="../../lib/js/axios.min.js"></script>
    <script src="../../js/all.min.js"></script>
    <script>
        productInfo();
    </script>
</body>

</html>